<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '新增卡项',
			size: '45%',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="首次消费时间" prop="cart_appoint">
				<cl-date-picker
					v-model="form.cart_appoint"
					placeholder="选择日期"
					style="width: 50%"
					value-format="yyyy-MM-dd"
					:picker-options="pickerOptions"
				/>
			</el-form-item>
			<el-form-item label="选择卡项" prop="list">
				<el-card shadow="never">
					<el-table border stripe :data="form.list">
						<el-table-column
							prop="sc_name"
							label="卡项名称"
							min-width="150"
							align="center"
						/>
						<el-table-column label="价格（￥）" prop="price" width="120" align="center">
							<template slot-scope="scope">
								<el-input
									v-model="scope.row.price"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									placeholder="请输入金额"
									@blur="form.price = $event.target.value"
								></el-input>
							</template>
						</el-table-column>
						<el-table-column
							label="卡项内容"
							prop="card_desc"
							min-width="150"
							align="center"
						/>
						<el-table-column
							label="时间"
							v-if="form.list.length && form.list[0].sc_type == 3"
							prop="etime_type"
							width="120"
							align="center"
						>
							<template slot-scope="scope">
								<cl-select
									v-model="scope.row.etime_type"
									placeholder="请选择"
									style="width: 100%"
									filterable
								>
									<el-option label="永久" :value="1" />
									<el-option label="三个月" :value="3" />
									<el-option label="半年" :value="6" />
									<el-option label="一年" :value="12" />
									<el-option label="二年" :value="24" />
									<el-option label="三年" :value="36" />
								</cl-select>
							</template>
						</el-table-column>
						<el-table-column
							label="调整数量"
							prop="card_nums"
							width="150"
							align="center"
							v-if="form.list.length && form.list[0].sc_type != 3"
						>
							<template slot-scope="{ row, $index }">
								<el-form-item
									:prop="`list.${$index}.card_nums`"
									:rules="rules.card_nums"
									:show-message="false"
									:inline-message="true"
								>
									<el-input
										v-model.number="row.card_nums"
										oninput="value=value.replace(/[^\d]/g,'')"
										@blur="row.card_nums = Number($event.target.value)"
									>
									</el-input>
								</el-form-item>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="80" align="center">
							<template slot-scope="{ $index: index }">
								<el-button @click="removeCard(index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="flex flex-justify-center pt-2">
						<cl-choice-servicecard
							v-model="form.list"
							:biz_id="detail.biz_id"
							@confirm="choiceConfirm"
							:multiple="false"
						/>
					</div>
				</el-card>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import dayjs from "dayjs";
	export default {
		props: {
			detail: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				form: {
					cart_appoint: "",
					list: []
				},
				rules: {
					cart_appoint: [{ required: true, message: "请选择日期", trigger: "change" }],
					list: [
						{
							required: true,
							message: "请选择卡项"
						}
					],
					card_nums: [
						{ required: true, message: "请填写数量" },
						{ type: "integer", min: 1, message: "数量不能为0" }
					]
				},
				saving: false,
				pickerOptions: {
					disabledDate: (time) => {
						return dayjs(time).isAfter(dayjs());
					}
				}
			};
		},
		methods: {
			open() {
				this.$refs.drawer.create();
			},
			close() {
				this.form.cart_appoint = "";
				this.$refs.drawer.close();
			},
			// 重置
			reset() {
				this.saving = false;
				this.form.list = [];
				// this.$refs.form.resetFields();
			},
			// 提交
			submit() {
				this.$refs.form.validate(async (valid, errors) => {
					this.showFormErr(errors);
					if (!valid) return;
					this.saving = true;
					const card = this.form.list[0];
					const { etime_type } = card;
					let form = {
						cart_appoint: this.form.cart_appoint,
						sc_id: card.sc_id,
						cus_id: this.detail.cus_id,
						card_balance: card.card_nums,
						real_price: card.price,
						etime_type: etime_type != 1 ? 2 : 1,
						fixed_type: 1,
						fixed_num: etime_type != 1 ? etime_type : 1
						// stime_type: card.stime_type
					};
					await this.$service.servicecard.buycard(form).done(() => {
						this.saving = false;
					});
					this.$message.success("操作成功");
					this.$emit("confirm");
					this.close();
				});
			},
			// 删除卡项
			removeCard(idx) {
				this.form.list.splice(idx, 1);
			},
			choiceConfirm() {
				this.$refs.form.validateField("list");
				console.log("this.form.list", this.form.list);
				if (this.form.list[0].etime_type == 2) {
					this.form.list[0].etime_type = this.form.list[0].fixed_num;
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep {
		.el-table {
			.el-form-item {
				margin-bottom: 0 !important;
			}
		}
		.el-radio-group {
			width: 100%;
		}
	}
</style>
